<template>
    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 200 200" :width="size" :height="size">
        <defs>
            <linearGradient :id="'nav-grad-1st-'+id" x1="34.59" y1="165.41" x2="165.41" y2="34.59" gradientUnits="userSpaceOnUse">
                <stop class="stop-light" offset="0.7" stop-opacity="0"/>
                <stop class="stop-light" offset="1" stop-opacity="0.5"/>
            </linearGradient>
            <linearGradient :id="'nav-grad-2nd-'+id" x1="34.59" y1="165.41" x2="165.41" y2="34.59" gradientUnits="userSpaceOnUse"
                            gradientTransform="translate(241.42 100) rotate(135)">
                <stop class="stop-light" offset="0.7" stop-opacity="0"/>
                <stop class="stop-light" offset="1" stop-opacity="0.5"/>
            </linearGradient>
        </defs>
        <g>
            <rect width="200" height="200" fill="none"/>
        </g>
        <g>
            <circle class="stroke-light" cx="100" cy="100" r="92.5" stroke-miterlimit="10" stroke-width="6"
                    :fill="'url(#nav-grad-1st-'+id+')'"/>
            <circle cx="100" cy="100" r="92.5" :fill="'url(#nav-grad-2nd-'+id+')'"/>
        </g>
        <g v-if="isArrow" :transform="'rotate('+rotate+')'" style="transform-origin: 50% 50%;">
            <path d="M96.46,32.82,32.82,96.46a5,5,0,0,0,0,7.08h0a5,5,0,0,0,7.08,0L96.46,47a5,5,0,0,1,7.08,0l56.56,56.57a5,5,0,0,0,7.08,0h0a5,5,0,0,0,0-7.08L103.54,32.82A5,5,0,0,0,96.46,32.82Z"
                  class="fill-light"/>
            <circle cx="101.77" cy="101.77" r="10" class="fill-light"/>
            <circle cx="100" cy="156.57" r="10" class="fill-light"/>
        </g>
        <g v-if="!isArrow">
            <path d="M145,120a5,5,0,0,0,5-5V55a5,5,0,0,0-5-5H55a5,5,0,0,0-5,5v60a5,5,0,0,0,5,5H95v20H55a5,5,0,0,0,0,10h90a5,5,0,0,0,0-10H105V120ZM65,110a5,5,0,0,1-5-5V65a5,5,0,0,1,5-5h70a5,5,0,0,1,5,5v40a5,5,0,0,1-5,5Z"
                  class="fill-light"/>
            <circle cx="69" cy="69" r="5" class="fill-light"/>
            <circle cx="84" cy="69" r="5" class="fill-light"/>
            <circle cx="99" cy="69" r="5" class="fill-light"/>
        </g>
    </svg>
</template>

<script>
    export default {
        name: "DvNavigator",
        data() {
            return {
                id: Math.random().toString().substr(3,4)
            }
        },
        props: {
            isArrow: {
                type: Boolean,
                default: false
            },
            size: {
                type: Number,
                default: 100
            },
            direction: {
                type: String,
                default: "up"
            }
        },
        computed: {
            rotate() {
                if (this.direction === "up") {
                    return 0
                } else if (this.direction === "left") {
                    return 270
                } else if (this.direction === "down") {
                    return 180
                } else if (this.direction === "right") {
                    return 90
                } else {
                    return 0
                }
            }
        }
    }
</script>

<style lang="scss">

</style>